<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		useRouter,
		useRoute
	} from 'vue-router'

	import {
		Search
	} from '@element-plus/icons-vue'

	const router = useRouter()
	const route = useRoute()

	const tableData = ref([{
		registrar: 'ename',
		template_status: 0,
		time: '2017-10-01 12:00',
	}, {
		registrar: 'tencent',
		template_status: 1,
		time: '2017-10-01 12:00',
	}, {
		registrar: 'netcn',
		template_status: 2,
		time: '2017-10-01 12:00',
	}, {
		registrar: 'xw',
		template_status: 3,
		time: '2017-10-01 12:00',
	}, {
		registrar: 'GD',
		template_status: 4,
		time: '2017-10-01 12:00',
	}])

	const dialogVisible = ref(false)
	const dialogVisible2 = ref(false)


	const placeholder = "查找域名/后缀 如：.cn \r多个域名/后缀用换行分隔"

	const dmName = ref(false)

	const dmFocus = () => {
		dmName.value = true
	}
	const dmBlur = () => {
		dmName.value = false
	}

	const isEdit = ref(true)

	const form = reactive({})

	const autoFee = ref(false)


	const currentPage = ref(1)
	const total = 1000

	const name = ref('崔宏强的模版')

	const options = ref([{
		label: '模版一',
		value: 1
	}, {
		label: '模版一',
		value: 2
	}, {
		label: '未设置模版',
		value: 0
	}])

	const transferform = reactive({})

	const templateform = reactive({
		type: 1
	})

	const domainform = reactive({})

	const multipleSelection = ref([])

	const tableData3 = ref([{
		name: 'mzlhskj.cn',
		registrar: '190vip'
	}, {
		name: 'lrdspt.cn',
		registrar: 'ename'
	}, {
		name: 'bjfyhtshop.cn',
		registrar: 'xw'
	}, {
		name: '0731s.cn',
		registrar: '190vip'
	}, {
		name: 'zmxuan2.cn',
		registrar: '190vip'
	}])


	const tableData4 = ref([{
		name: '崔宏强的模板',
		registrant: '张三',
		type: 1
	}, {
		name: '企业1的模板',
		registrant: '北京荟米科技有限公司',
		type: 2
	}, {
		name: '长期持有的',
		registrant: '张三',
		type: 1
	}, {
		name: '临时的模板',
		registrant: '张三',
		type: 1
	}, {
		name: '模板名称456',
		registrant: '深圳英迈思信息技术',
		type: 1
	}])

	const tableData5 = ref([{
		name: 'axzadc.cn',
		old_template: '模板名称123',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '过户失败！[原因]'
	}, {
		name: 'axzadc.cn',
		old_template: '模板名称123',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '过户失败！[原因]'
	}, {
		name: 'axzadc.cn',
		old_template: '模板名称123',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '过户失败！[原因]'
	}, {
		name: 'axzadc.cn',
		old_template: '模板名称123',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '提交成功！'
	}, {
		name: 'axzadc.cn',
		old_template: '过户失败！该域名注册商下无可用模板！',
		result: '过户失败！[原因]'
	}])

	const total3 = ref(86)

	const total4 = ref(9)

	const domainShow = ref(true)
	const domainShow2 = ref(false)
	const domainShow3 = ref(false)

	const radio = ref(null)
	const templateSelection = ref({})


	const handleSelectionChange = (val) => {
		multipleSelection.value = val
	}

	const getCurrentRow = (row) => {
		templateSelection.value = row
	}


	const getStringLen = (str) => {
		if (str) {
			let arr = str.split('\n')
			return arr.length
		} else {
			return 0
		}
	}

	const addClick = () => {
		domainShow.value = false
		domainShow2.value = true
	}

	const domainBack = () => {
		domainShow.value = true
		domainShow2.value = false
	}

	const domainSelect = () => {
		let arr = multipleSelection.value.map(item => item.name)
		transferform.nameStr = arr.join('\n')
		domainShow.value = true
		domainShow2.value = false
	}

	const addTemplate = () => {
		domainShow.value = false
		domainShow3.value = true
	}

	const templateBack = () => {
		domainShow.value = true
		domainShow3.value = false
	}

	const templateSelect = () => {
		domainShow.value = true
		domainShow3.value = false
	}

	const onSubmit = () => {
		dialogVisible.value = false
		dialogVisible2.value = true
	}


	const handleSizeChange = (val) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val) => {
		console.log(`current page: ${val}`)
	}

	const outerVisible = ref(false)

	const beforeChange = () => {
		return new Promise((resolve) => {
			if (autoFee.value == false) {
				outerVisible.value = true
			} else {
				return reject(new Error('Error'))
			}
		})
	}

	const viewsClick = () => {
		router.push('/my-domains')
	}

	const onConfirm = () => {
		autoFee.value = true
		outerVisible.value = false
	}
</script>
<template>
	<div class="container">
		<div class="top-title">
			查看模板
		</div>
		<div class="top-notice">
			<el-alert
				title="根据《互联网域名管理办法》和相关法律法规要求域名注册信息须真实、准确、完整。我司对于未完成实名的域名将进行锁定，禁止域名管理(含域名续费功能)、交易及解析（此前已设置的解析将失效并禁止新增解析）等操作。"
				type="warning" show-icon></el-alert>
		</div>
		<div class="top-area">
			<div class="area-title" :class="{'is-edit':!isEdit}">
				<el-input v-model="name" maxlength="50" style="width: 200px;" :readonly="isEdit"></el-input>
				<el-button link @click="isEdit = !isEdit">
					<el-icon>
						<Edit />
					</el-icon>
				</el-button>
			</div>
			<div class="area-row">
				<div class="area-col">
					<div class="area-cell">
						<div class="area-cell-label">
							模板类型：
						</div>
						<div class="area-cell-content">
							个人模板
						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							姓名（中文）：
						</div>
						<div class="area-cell-content">
							崔宏强
						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							姓名（英文）：
						</div>
						<div class="area-cell-content">
							CuiHongQiang
						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							邮箱：
						</div>
						<div class="area-cell-content">
							17600521247@163.com

						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							联系电话：
						</div>
						<div class="area-cell-content">
							17600521247
						</div>
					</div>
				</div>
				<div class="area-col">
					<div class="area-cell">
						<div class="area-cell-label">
							国家：
						</div>
						<div class="area-cell-content">
							中国
						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							所在城市：
						</div>
						<div class="area-cell-content">
							广东省深圳市宝安区
						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							联系地址：
						</div>
						<div class="area-cell-content">
							新安街道海富一巷999号
						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							邮政编码：
						</div>
						<div class="area-cell-content">
							518101
						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							更新时间：
						</div>
						<div class="area-cell-content">
							2024-09-19 15:57:55
						</div>
					</div>
				</div>
				<div class="area-right">
					<div class="area-label">状态</div>
					<div class="area-status">已通过</div>
				</div>
			</div>
			<div class="area-flex">
				<div class="area-flex-left">
					您可以
				</div>
				<div class="area-flex-content flex-col">
					<div class="area-flex-item">
						将此模板设为默认 <el-switch v-model="autoFee" inline-prompt style="--el-switch-on-color: #F68A0C;"
							active-text="开" :before-change="beforeChange" inactive-text="关" />
					</div>
					<div class="area-flex-item">
						<el-button link class="domain-btn" @click="viewsClick">查看关联到此模板的域名 (8)</el-button>
					</div>
					<div class="area-flex-item flex-between">
						<el-button link icon="plus" @click="dialogVisible = true"> 将域名过户到此模板</el-button>
						<el-button link class="del-btn" v-if="!autoFee"> 删除此模板</el-button>
					</div>
				</div>
			</div>
		</div>
		<div class="top-notice">
			<el-alert
				title="温馨提示：为了管理来源外部注册商的域名，我们会将您的模板信息提交至其他注册商。若您使用此功能即表示您自愿授权给190代为操作，同意190将我的实名材料提交至合作商平台由合作商提交实名。"
				type="warning" show-icon></el-alert>
		</div>
		<div class="top-area">
			<div class="area-title">
				外部模板
			</div>
			<div class="table-box">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column type="index" label="序号" width="60" align="center">
					</el-table-column>
					<el-table-column prop="registrar" label="外部注册商"></el-table-column>
					<el-table-column prop="template_status" label="模板状态" width="120">
						<template #default="scope">
							<span v-if="scope.row.template_status == 0" class="td-error">待验证</span>
							<span v-if="scope.row.template_status == 1" class="td-gray">未同步</span>
							<span v-if="scope.row.template_status == 2" class="td-purple">同步中</span>
							<span v-if="scope.row.template_status == 3" class="td-gray">同步失败</span>
							<span v-if="scope.row.template_status == 4" class="td-success">已同步</span>
						</template>
					</el-table-column>
					<el-table-column prop="time" label="更新时间" align="center">
					</el-table-column>
					<el-table-column prop="operate" label="操作" align="center">
						<template #default="scope">
							<el-button link v-if="scope.row.template_status == 0">验证</el-button>
							<el-button link v-else-if="scope.row.template_status == 1">同步</el-button>
							<span v-else>-</span>
						</template>
					</el-table-column>
				</el-table>
				<div class="pager-box">
					<span></span>
					<el-pagination v-model:current-page="currentPage" :page-size="10" :background="true"
						:page-sizes="[10, 20, 50]" layout="prev, pager, next,sizes,jumper" :total="total"
						@size-change="handleSizeChange" @current-change="handleCurrentChange" />
				</div>
			</div>
		</div>
		<el-dialog v-model="dialogVisible" width="520">
			<template #header>
				<div class="dialog-header" v-if="domainShow">
					<span class="dialog-title">域名过户</span>
				</div>
				<div class="dialog-header" v-if="domainShow2">
					<el-icon @click="domainBack">
						<ArrowLeftBold />
					</el-icon>
					<span class="dialog-title">选择域名</span>
				</div>
				<div class="dialog-header" v-if="domainShow3">
					<el-icon @click="templateBack">
						<ArrowLeftBold />
					</el-icon>
					<span class="dialog-title">选择模板</span>
				</div>
			</template>
			<div class="transfer-form" v-if="domainShow">
				<div class="form-item">
					<div class="form-item-label">过户域名：</div>
					<div class="form-item-content">
						<div class="wrapdmTextarea textarea-box">
							<div class="textarea-warp" style="z-index: 200; top: 0;">
								<textarea id="textarea" placeholder="请输入要过户的域名，多条请换行分隔"
									class="ui-input dmTextarea dmTyping" name="domain" style="overflow-y: auto;"
									v-model="transferform.nameStr"></textarea>
								<div class="textarea-limit">
									{{getStringLen(transferform.nameStr)}}/100
								</div>
							</div>
						</div>
						<el-button class="btn-default" @click="addClick"><el-icon>
								<Plus />
							</el-icon>我的域名</el-button>
					</div>
				</div>
				<div class="form-item">
					<div class="form-item-label">目标模板：</div>
					<div class="form-item-content">
						<el-button class="select-mb btn-default" @click="addTemplate">
							<span v-if="templateSelection.name">{{templateSelection.name}}</span>
							<span v-else>
								<el-icon>
									<Plus />
								</el-icon>选择过户到的实名模板
							</span>
						</el-button>
					</div>
				</div>
			</div>
			<div v-if="domainShow2">
				<div class="domains-form">
					<span class="label">快速查找</span>
					<div class="wrapdmTextarea">
						<div class="textarea-warp" style="z-index: 200; top: 0;">
							<div class="textarea-suffix">
								<img src="../../assets/img/search.png" alt="" />
							</div>
							<textarea id="textarea" :placeholder="placeholder" class="ui-input dmTextarea" name="domain"
								@focus="dmFocus" @blur="dmBlur" :class="dmName ? 'dmTyping' : ''"
								style="overflow-y: auto;" v-model="domainform.nameStr"></textarea>
						</div>
					</div>
					<el-select v-model="domainform.template" placeholder="选择域名模板" style="width: 200px">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
				<div class="domains-table">
					<div class="table-tool">
						<div class="tool-left">搜索结果共{{total3}}条，已选择{{multipleSelection.length}}条。</div>
					</div>
					<el-table ref="multipleTableRef" :data="tableData3" @selection-change="handleSelectionChange"
						style="width: 100%" show-overflow-tooltip>
						<el-table-column type="selection" width="50"></el-table-column>
						<el-table-column prop="name" label="域名">
						</el-table-column>
						<el-table-column prop="registrar" label="注册商">
						</el-table-column>
					</el-table>
				</div>
			</div>
			<div v-if="domainShow3">
				<div class="domains-form">
					<span class="label">快速查找</span>
					<el-input placeholder="输入关键词" :suffix-icon="Search" style="width: 200px;"></el-input>
				</div>
				<div class="domains-table">
					<div class="table-tool">
						<div class="tool-left">搜索结果共{{total4}}条。</div>
					</div>
					<el-table ref="multipleTable2" :data="tableData4" style="width: 100%" show-overflow-tooltip
						height="285">
						<el-table-column width="50">
							<template #default="scope">
								<el-radio :value="scope.$index" v-model="radio"
									@change.native="getCurrentRow(scope.row)"> </el-radio>
							</template>
						</el-table-column>
						<el-table-column prop="name" label="模板名称">
						</el-table-column>
						<el-table-column prop="registrant" label="注册人">
						</el-table-column>
						<el-table-column prop="type" label="模板类型">
						</el-table-column>
					</el-table>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer" v-if="domainShow">
					<el-button @click="dialogVisible = false" class="btn-default">取 消</el-button>
					<el-button type="warning" @click="onSubmit">
						确 认
					</el-button>
				</div>
				<div class="dialog-footer" v-if="domainShow2">
					<el-button @click="domainBack" class="btn-default">返 回</el-button>
					<el-button type="warning" @click="domainSelect">
						选 择
					</el-button>
				</div>
				<div class="dialog-footer" v-if="domainShow3">
					<el-button @click="templateBack" class="btn-default">返 回</el-button>
					<el-button type="warning" @click="templateSelect">
						选 择
					</el-button>
				</div>
			</template>
		</el-dialog>
		<el-dialog v-model="dialogVisible2" title="域名过户结果" width="520">
			<el-table :data="tableData5" style="width: 100%" show-overflow-tooltip height="285">
				<el-table-column prop="name" label="域名">
				</el-table-column>
				<el-table-column prop="old_template" label="原模板">
				</el-table-column>
				<el-table-column prop="result" label="结果">
				</el-table-column>
			</el-table>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="warning" @click="dialogVisible2 = false">
						确 认
					</el-button>
				</div>
			</template>
		</el-dialog>
		<el-dialog v-model="outerVisible" class="message-dialog" width="340" :show-close="false">
			<div class="message-flex">
				<div class="message-flex-left">
					<el-icon :size="22" color="#F68A0C">
						<WarningFilled />
					</el-icon>
				</div>
				<div class="message-flex-content flex-col">
					<h4>更换默认模板</h4>
					<p>要将默认模板（默认模板名）更换为当前模板吗？</p>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="warning" @click="onConfirm">
						确 认
					</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<style scoped lang="scss">
	.top-area {
		padding: 20px;
	}

	.area-title {
		::v-deep .el-input__wrapper {
			box-shadow: unset;
			padding: 0;
			border-radius: 0;

			.el-input__inner {
				font-size: 18px;
				font-weight: 700;
				color: #3D3D3D;
			}
		}

		&.is-edit {
			::v-deep .el-input__wrapper {
				box-shadow: 0 1px 0 #dcdfe6;
			}
		}
	}

	.area-col {
		min-width: 30%;
	}

	.area-col:first-child .area-cell-label {
		min-width: 120px;
	}

	.area-cell-label {
		min-width: 90px;
	}

	.area-flex {
		display: flex;
		border-top: 1px solid #dcdfe6;
		padding: 20px;
		margin: 20px -20px 0;

		.area-flex-left {
			line-height: 28px;
			font-size: 18px;
			font-weight: 700;
			text-align: left;
			color: #3D3D3D;
			position: relative;
			width: 120px;
		}
	}

	::v-deep .message-dialog {
		.el-dialog__header {
			display: none;
		}

		.message-flex {
			display: flex;

			.message-flex-left {
				margin-right: 15px;
				width: 22px;
			}

			.message-flex-content {
				h4 {
					margin-bottom: 10px;
				}

				p {
					color: #999;
				}
			}
		}
	}

	.domain-btn {
		margin: 20px 0;
		color: #F68A0C;
	}

	.domain-btn:hover {
		color: #F68A0C;
		text-decoration: underline;
	}

	.del-btn:hover {
		color: rgb(0, 0, 255);
		text-decoration: underline;
	}

	.btn-default:hover {
		color: #fff;
		border-color: #F68A0C;
		background-color: #F68A0C;
	}

	.transfer-form .form-item {
		display: flex;
		margin-bottom: 20px;
	}

	.form-item-label {
		width: 70px;
		line-height: 32px;
	}

	.form-item-content {
		flex: 1;
		min-width: 0;
	}

	.textarea-box {
		width: 100%;
		margin-bottom: 15px;
		height: 180px;
	}


	.textarea-limit {
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.select-mb {
		width: 100%;
		border-style: dashed;
	}

	.domains-form {
		display: flex;
		align-items: center;
		margin-bottom: 10px;

		.label {
			width: 70px;
		}

		.wrapdmTextarea {
			width: 200px;
			margin-right: 14px;
		}
	}

	.domains-table {
		.table-tool {
			padding-bottom: 10px;
		}
	}
</style>